<template>
  <el-form :model="form">
    <el-form-item>
      <el-select
        style="width: 194px"
        v-model="form.city"
        clearable
        placeholder="市"
        @visible-change="seletekey($event, 'city')"
      >
        <el-option
          v-for="(val, key) in citys"
          :key="key"
          :label="val"
          :value="val"
        />
      </el-select>
      -
      <el-select
        style="width: 194px"
        v-model="form.area"
        clearable
        placeholder="区"
        @visible-change="seletekey($event, 'area')"
      >
        <el-option
          v-for="(val, key) in areas"
          :key="key"
          :label="val"
          :value="val"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
// 数据获取
import { pcaa } from 'area-data'
export default {
  props: {
    cityArea: {
      type: Object
    }
  },
  data() {
    return {
      form: {},
      pcaaData: pcaa,
      // 区域数据
      provinces: pcaa['86'],
      citys: [],
      areas: [],
      obj: {}
    }
  },
  methods: {
    seletekey(e, type) {
      console.log(e)
      if (e) {
        switch (type) {
          case 'city':
            Object.keys(this.provinces).forEach(item => {
              this.citys = { ...this.citys, ...this.pcaaData[item], 110000: '北京市', 120000: '天津市', 310000: '上海市', 500000: '重庆市' }
            })

            Object.keys(this.citys).forEach(key => {
              if (this.citys[key] === '市辖区') {
                delete this.citys[key]
              }
            })
            break
          case 'area':
            Object.keys(this.citys).filter(item => {
              if (this.citys[item] === this.form.city) {
                this.areas = this.pcaaData[item]
              }
            })
            Object.keys(this.areas).filter(item => {
              if (this.areas[item] === '市辖区') {
                this.areas = this.pcaaData[item]
              }
            })

            // }
            break
        }
      }
    }
  },
  watch: {
    form: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal) {
        this.$emit('city', newVal)
      }
    },
    cityArea(newVal) {
      this.form = newVal
    }
  }
}
</script>
